<!-- <template>
  <div class="config">
    <div>
      <Toolbar class="toolbar" :editor="editorRef" :defaultConfig="toolbarConfig" ref="toolbarRef" />
      <Editor class="editor" @onChange="handleChange" v-model="props.initValue" :defaultConfig="editorConfig" @onCreated="handleCreated"> </Editor>
    </div>
  </div>
</template>

<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css'

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { log } from '../ts/logger'
import { ApiService } from '../ts/ApiService'
import { BaseDataResult } from '../ts/types/BaseResult'

const props = defineProps(['initValue', 'mode'])
const emits = defineEmits(['value-change'])

const handleChange = (editor: any) => {
  const html = editor.getHtml()
  log.debug('内容变化：', html)
  emits('value-change', html)
}

const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<pre></pre>')
const toolbarRef = ref(null)

onMounted(() => {
  valueHtml.value = props.initValue
  log.debug('toolbar:=====>', toolbarRef.value, Toolbar)
  toolbarConfig.value = props.mode === 'complete' ? toolbarConfig2 : toolbarConfig1
})

// 富文本框简化版本
const toolbarConfig1 = {
  toolbarKeys: [
    'headerSelect', //标题
    // 'fontSize', //字号
    'codeBlock', //代码块
    'bold', //粗体
    'italic', //斜体
    'color', //文字颜色
    'justifyLeft', //左对齐
    'justifyRight', //右对齐
    'justifyCenter', //居中对齐
    'divider', //分割线
    'emotion', //表情
    'insertLink', //插入链接
    {
      key: 'group-list', // 必填，要以 group 开头
      title: '序列', // 必填
      menuKeys: [
        'bulletedList', //无序列表
        'numberedList', //有序列表
      ], // 下级菜单 key ，必填
    },
    {
      key: 'group-image', // 必填，要以 group 开头
      title: '图片', // 必填
      menuKeys: [
        'insertImage', //网络图片
        'uploadImage', //上传图片
      ], // 下级菜单 key ，必填
    },
    // 'insertVideo', //插入视频
    // 'uploadVideo', //上传视频
    'fullScreen', //全屏
  ],
}

// 富文本框完整版本
const toolbarConfig2 = {
  toolbarKeys: [
    'bold', //粗体
    'underline', //下划线
    'italic', //斜体
    'through', //删除线
    'code', //行内代码
    'sub', //下标
    'sup', //上标
    'clearStyle', //清楚格式
    'color', //文字颜色
    'bgColor', //背景色
    'fontSize', //字号
    'fontFamily', //字体
    'indent', //增加缩进
    'delIndent', //减少缩进
    'justifyLeft', //左对齐
    'justifyRight', //右对齐
    'justifyCenter', //居中对齐
    'justifyJustify', //两端对齐
    'lineHeight', //默认行高
    'divider', //分割线
    'emotion', //表情
    'insertLink', //插入链接
    'editLink', //修改链接
    'unLink', //取消链接
    'viewLink', //查看链接
    'codeBlock', //代码块
    'blockquote', //引用
    'headerSelect', //标题
    {
      key: 'group-header', // 必填，要以 group 开头
      title: '标题', // 必填
      menuKeys: ['header1', 'header2', 'header3', 'header4', 'header5'], // 下级菜单 key ，必填
    },
    'todo', //代办
    'redo', //重做
    'undo', //撤销
    'enter', //回车
    {
      key: 'group-list', // 必填，要以 group 开头
      title: '序列', // 必填
      menuKeys: [
        'bulletedList', //无序列表
        'numberedList', //有序列表
      ], // 下级菜单 key ，必填
    },
    'insertTable', //插入表格
    'deleteTable', //删除表格
    'insertTableRow', //插入行
    'deleteTableRow', //删除行
    'insertTableCol', //插入列
    'deleteTableCol', //删除列
    'tableHeader', //表头
    'tableFullWidth', //宽度自适应
    'insertImage', //网络图片
    'deleteImage', //删除图片
    'editImage', //编辑图片
    'viewImageLink', //查看图片链接
    'uploadImage', //上传图片
    {
      key: 'group-imageWisth', // 必填，要以 group 开头
      title: '图片大小', // 必填
      menuKeys: ['imageWidth30', 'imageWidth50', 'imageWidth100'], // 下级菜单 key ，必填
    },
    'insertVideo', //插入视频
    'uploadVideo', //上传视频
    'editVideoSize', //修改尺寸
    'codeSelectLang', //选择语言
    'fullScreen', //全屏
  ],
}

const toolbarConfig = ref()

// 图片上传
const editorConfig = {
  placeholder: '请开始你的表演...',
  scroll: true, //编辑器是否支持滚动
  MENU_CONF: {
    uploadImage: {
      // 自定义上传
      async customUpload(file: File, insertFn: any) {
        log.debug('自定义上传中...')
        ApiService.uploadEditorImage(file, (data: BaseDataResult<string>) => {
          if (data.success) {
            // 最后插入图片
            insertFn(data.data, '', '')
          }
        })
      },
    },
  },
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor: any) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  log.debug('====>', editor, editor.getAllMenuKeys())
}
</script>

<style lang="scss" scoped>
.config {
  border: 1px solid rgb(220, 223, 230);
  border-radius: 5px;
  margin: 1px;
  .toolbar {
    border-bottom: 1px solid rgb(220, 223, 230);
  }
  .editor {
    min-height: 15rem;
    max-height: 20rem;
    overflow-y: auto;
  }
}
</style> -->
